<template>
  <view class="appointmentDoctorInfo-page">
    <NavBar title="医生详情" />

    <view class="list">
      <view class="info">
        <view class="content">
          <Image class="avatar" :src="doctorInfo?.avatarUrl" />

          <view class="content-info">
            <view class="name">
              <text class="name-text">{{ doctorInfo?.doctorName }}</text>

              <text class="name-label">{{
                doctorInfo?.gender === "1"
                  ? "男"
                  : doctorInfo?.gender === "2"
                  ? "女"
                  : "未知"
              }}</text>
              <text class="name-label">{{ doctorInfo?.title }}</text>
            </view>

            <view class="desc">
              <text class="desc-text">{{ doctorInfo?.notes }}</text>
            </view>
          </view>
        </view>

        <view class="times">
          <view class="time"
            >预约挂号({{ dayjs(query.date).format("YYYY-MM-DD") }})</view
          >

          <view class="tag"
            >挂号费：{{
              doctorInfo?.appointmentFee
                ? (doctorInfo?.appointmentFee / 100).toFixed(2)
                : "0.00"
            }}元</view
          >
        </view>

        <view class="block">
          <view class="tags">
            <view
              class="tag"
              :class="{ active: currentTag === item.value }"
              @tap="handleSwitchTag(item.value)"
              v-for="item in doctorInfo?.periodList"
              :key="item.value"
            >
              {{ item.text }}
            </view>
          </view>

          <view class="nums">
            <view
              class="cards"
              v-for="(item, index) in detailList"
              :key="index"
            >
              <view
                class="card"
                v-for="target in item"
                :key="target.visitSeqNo"
                @tap="handleSelectDetail(target)"
                :class="{
                  active: currentDetail === target,
                  disabled: target.available === '0', // 1可预约 0不可预约
                }"
              >
                <text class="card-date">{{
                  doctorInfo?.periodList?.find(
                    (item) => item.value === currentTag
                  )?.text
                }}</text>
                <text class="card-number">{{ target.visitSeqNo }}号</text>
                <text class="card-time">{{ target.startTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="footer" v-if="currentDetail">
      <view class="footer-name">预约时间：</view>

      <view class="footer-value">
        <text class="footer-value-text"
          >{{ dayjs(query.date).format("MM月DD日") }}
          {{ currentDetail?.startTime }}</text
        >
        <text class="footer-value-number"
          >{{ currentDetail?.visitSeqNo }}号</text
        >
      </view>

      <view class="footer-btn" @tap="handleNext">下一步</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import Taro, { useReady, useRouter } from "@tarojs/taro";
import NavBar from "../../components/NavBar.vue";
import { useAppointmentStore } from "../../stores/appointmentStore";
import { ref, computed } from "vue";
import { DetailList, RemainListRes } from "../../../types/appointment.type";

const router = useRouter();
const appointmentState = useAppointmentStore();
const query = ref<{
  doctorId: number | undefined;
  deptId: number | undefined;
  date: number | undefined;
}>({
  doctorId: undefined,
  deptId: undefined,
  date: undefined,
});
const doctorInfo = ref<RemainListRes>();

const currentTag = ref("");
// 当前选中的号源
const currentDetail = ref<DetailList>();

const handleSelectDetail = (item: DetailList) => {
  // 1可预约 0不可预约
  if (item.available === "0") {
    return;
  }

  currentDetail.value = item;
};

const detailList = computed(() => {
  const list =
    doctorInfo.value?.periodList.find((item) => item.value === currentTag.value)
      ?.detailList ?? [];

  // 4个一组
  const result: DetailList[][] = [];

  for (let i = 0; i < list.length; i += 4) {
    result.push(list.slice(i, i + 4));
  }

  return result ?? [];
});

const handleSwitchTag = (index: string) => {
  currentTag.value = index;
};

const handleNext = () => {
  // 上午 | 下午 | 晚上
  const period = currentTag.value;
  const visitSeqNo = currentDetail.value?.visitSeqNo;

  Taro.navigateTo({
    url: `/pages/appointmentDoctorInfoConfirm/appointmentDoctorInfoConfirm?doctorId=${query.value.doctorId}&deptId=${query.value.deptId}&date=${query.value.date}&period=${period}&visitSeqNo=${visitSeqNo}`,
  });
};

useReady(() => {
  if (router.params.doctorId) {
    query.value.doctorId = Number(router.params.doctorId);
  }

  if (router.params.deptId) {
    query.value.deptId = Number(router.params.deptId);
  }

  if (router.params.date) {
    query.value.date = Number(router.params.date);
  }

  const info =
    appointmentState.remainData[dayjs(query.value.date).format("YYYY-MM-DD")];

  if (info) {
    doctorInfo.value = info.find(
      (item) => item.doctorId === query.value.doctorId
    );

    if (
      doctorInfo.value?.periodList &&
      doctorInfo.value?.periodList.length > 0
    ) {
      currentTag.value = doctorInfo.value?.periodList[0].value ?? "";
    }
  }
});
</script>

<style lang="scss">
.appointmentDoctorInfo-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: #ffffff;

  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 20px;
    background: #f1f5f8;
    overflow-y: auto;
    position: relative;

    .info {
      width: 100%;

      .content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        padding: 20px 16px;
        background: linear-gradient(180deg, #d6f2f3 0%, #f6f8fb 100%);

        .avatar {
          flex-shrink: 0;
          width: 43px;
          height: 64px;
          // background-color: #16ada4;
          border-radius: 4px;
        }

        .content-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 5px;
          padding-left: 20px;

          .name {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 400;
            font-size: 15px;
            color: #333333;

            .name-text {
              font-weight: bold;
              font-size: 18px;
              color: #06202e;
              line-height: 18px;
              font-style: normal;
            }

            .name-label {
              font-weight: 400;
              font-size: 13px;
              color: #777777;
              line-height: 13px;
              font-style: normal;
            }
          }

          .desc {
            width: 100%;
            font-weight: 400;
            font-size: 13px;
            color: #777777;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }

      .times {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0px 16px;
        padding-bottom: 15px;

        .time {
          font-weight: 500;
          font-size: 16px;
          color: #06202e;
          line-height: 16px;
          font-style: normal;
        }

        .tag {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 4px 8px;
          background: #ffecec;
          border-radius: 4px;
          font-weight: 400;
          font-size: 14px;
          color: #d90000;
          font-style: normal;
        }
      }

      .block {
        display: flex;
        flex-direction: column;
        width: 347px;
        margin: 0px auto;
        background: #ffffff;
        border-radius: 12px;

        .tags {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 38px;
          width: 100%;
          padding-top: 13px;
          padding-bottom: 8px;

          .tag {
            font-weight: 400;
            font-size: 15px;
            color: #666666;
            font-style: normal;
            position: relative;

            &.active {
              font-weight: 500;
              font-size: 15px;
              color: #000000;
              font-style: normal;

              &::after {
                content: "";
                width: 100%;
                height: 3px;
                background: #16ada4;
                border-radius: 2px 2px 2px 2px;
                position: absolute;
                left: 0;
                bottom: -8px;
              }
            }
          }
        }

        .nums {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 100%;
          padding: 16px 10px;

          .cards {
            display: flex;
            gap: 10px;
            width: 100%;

            .card {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: calc((100% - 30px) / 4);
              height: 71px;
              background: #f7f8fc;
              border-radius: 4px;

              .card-date {
                font-weight: 400;
                font-size: 13px;
                color: #333333;
                font-style: normal;
              }

              .card-number {
                margin-top: 3px;
                font-weight: 500;
                font-size: 16px;
                color: #333333;
                font-style: normal;
              }

              .card-time {
                font-weight: 400;
                font-size: 13px;
                color: #333333;
                font-style: normal;
              }

              &.disabled {
                background: #efefef;

                .card-date {
                  color: rgba(0, 0, 0, 0.3);
                }

                .card-number {
                  color: rgba(0, 0, 0, 0.3);
                }

                .card-time {
                  color: rgba(0, 0, 0, 0.3);
                }
              }

              &.active {
                background: #16ada4;

                .card-date {
                  color: rgba(255, 255, 255, 0.8);
                }

                .card-number {
                  color: #ffffff;
                }

                .card-time {
                  color: rgba(255, 255, 255, 0.4);
                }
              }
            }
          }
        }
      }
    }
  }

  .footer {
    flex-shrink: 0;
    width: 100%;
    height: 150px;
    padding-top: 10px;
    padding-left: 16px;
    padding-right: 16px;
    background: #ffffff;
    border-radius: 12px 12px 0px 0px;

    .footer-name {
      font-weight: 400;
      font-size: 13px;
      color: #333333;
    }

    .footer-value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      padding-top: 10px;

      .footer-value-text {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        font-style: normal;
      }

      .footer-value-number {
        font-weight: 500;
        font-size: 16px;
        color: #16ada4;
        font-style: normal;
      }
    }

    .footer-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 45px;
      margin-top: 18px;
      background: #16ada4;
      border-radius: 30px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 24px;
      text-align: center;
      font-style: normal;
    }
  }
}
</style>
